<template>
  <div class="map_container">
    <div id="map" class="map"></div>
  </div>
</template>

<script lang="ts" name="rwmap">
import { defineComponent, onMounted, ref, unref, watch } from "vue";
import { useMap } from "/@/hooks/rw/map";
import { ITreeData } from "/@/views/system/dict/dict.type";
interface IProps {
  type: "position" | "area" | "history";
  mapOptions: Record<string, any>;
  areaData: [];
  mapId: string;
}
export default defineComponent({
  props: {
    type: {
      type: String,
      default: "position",
    },
    mapOptions: {
      type: Object,
      default: () => {},
    },
    areaData: {
      type: Array,
      default: [],
    },
    mapId: {
      type: String,
      default: "",
    },
  },
  setup(props: IProps) {
    const { type, mapOptions, areaData } = props;
    // 根据不同的type需求 渲染不同的页面和功能，最后抛出对应的方法函数
    onMounted(() => {
      init(type);
    });

    function init(type) {
      // 初始化地图
			console.log({...mapOptions},'mapOptions');
      const { area, position, history, common, map } = useMap({
        el: "map",
        ...mapOptions,
      });
      switch (type) {
        case "position":
          return position;
        case "area":
          if (areaData) {
            area.setArea(unref(areaData));
          }
          return area;
        case "history":
          return history;
        default:
          return position;
      }
    }
    return {
      init,
    };
  },
});
</script>

<style lang="less" scoped>
.map_container {
  width: 100%;
  height: 100%;
  .map {
    width: 100%;
    height: 100%;
  }
}
</style>
